<%@ include file="/WEB-INF/pages/taglibs.jsp" %>
<!-- 为首部导航是否选中识别用 -->
<c:set var="module" value="report" scope="request" />
<!DOCTYPE html>
<html>
<head>
    <title>报表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link href="${base}/css/antd/antd.css" rel="stylesheet" type="text/css" />
    <link href="${base}/css/stylesheets.css" rel="stylesheet" type="text/css" />
    <link href="${base}/css/datatables/datatables.css" rel="stylesheet" type="text/css" />
    <link href="${base}/css/infopanel/cybertron.infopanel.css" rel="stylesheet" type="text/css" />
    <link href="${base}/css/ztree/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <link href="${base}/css/cybertron/stylesheet.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="${base}/js/react/react.js"></script>
    <script type="text/javascript" src="${base}/js/react/react-dom.js"></script>
    <script type="text/javascript" src="${base}/js/antd/antd.js"></script>

    <script type='text/javascript' src='${base}/js/jquery/jquery.min.js'></script>
    <script type='text/javascript' src='${base}/js/jquery/jquery-ui.min.js'></script>
    <script type='text/javascript' src='${base}/js/jquery/jquery-migrate.min.js'></script>
    <script type='text/javascript' src='${base}/js/jquery/globalize.js'></script>
    <script type='text/javascript' src="${base}/js/bootstrap/bootstrap.min.js"></script>

    <script type="text/javascript" src="${base}/js/plugins/mousewheel/jquery.mousewheel.min.js" ></script>
    <script type='text/javascript' src='${base}/js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js'></script>

    <script type="text/javascript" src="${base}/js/plugins/datatables/datatables.min.js"></script>
    <script type="text/javascript" src="${base}/js/plugins/infopanel/cybertron.infopanel.js"></script>

    <script type="text/javascript" src="${base}/js/cybertron/core.js"></script>
    
<style type="text/css">
.btn.check-all {
    padding: 6px;
    border-radius: 3px;
}
.btn.check-all.active:before {
    font-family: FontAwesome;
    content: "\f00c";
    position: absolute;
    top: -2px;
    left: 0;
}
label em{
	color: red;
}
form input[type=radio]{ 
	display: table-cell; 
	width: 13px; 
	height: 20px; 
	margin: 0 10px 0 20px; 
}
.toolbar { 
	text-align: center; 
	margin: 1px auto; 
	padding: 0; 
}
.toolbar a { 
	margin:0 2px; 
}
.ant-calendar-range-picker-input{
	padding:0;
	display: table-cell;
	color: #000;
}
</style>

</head>

<body data-module="report">

<div id="content-container">
	<div class="page-container page-sidebar-md">
		<div class="container">
			<div class="row">
				<div class="col-md-12" style="margin-top: 6px;">
					<!-- <a id="btn-add-report" class="btn btn-primary btn-sm" role="button" tabindex="0" data-trigger="focus" data-toggle="infopanel" data-infopanel="#edit-report-panel">
		                <i class="fa fa-plus-circle"></i>
		                <fmt:message key="button.add" />
		            </a> -->
		            <button id="btn-del-report" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#del-report-confirm-modal" disabled>
		                <i class="fa fa-trash"></i>
		                <fmt:message key="button.delete" />
		            </button>
		            <!-- <div class="pull-right search">
		            	<input class="form-control" id="fuzzy" placeholder="Search" type="text">
		            </div> -->
				</div>
			</div>
			
			<div class="row" >
				<div class="col-md-12" >
					<table id="reportTable" class="table table-striped" cellspacing="0" style="width: 100%;">
				        <thead>
				            <tr>
				                <th> 
									<div class="btn-group" data-toggle="buttons">
				                        <label class="btn btn-xs btn-default btn-clean check-all"><input type="checkbox" id="check-all" autocomplete="off" /></label>
				                    </div>
								</th>
								<th>名称</th>
				                <th>创建时间</th>
				                <th>修改时间</th>
				                <th>描述</th>
				                <th>预览</th>
				                <th>调度</th>
				                <th>操作</th>
				            </tr>
				        </thead>
				        <tbody>
				        <c:forEach var="report" items="${pager.data}">
				            <tr>
				                <td></td>
				                <td>${report.name}</td>
				                <td>${report.created}</td>
				                <td>${report.modified}</td>
				                <%-- <td>${report.creator}</td> --%>
				                <td>${report.description}</td>
				                <td>${report.id}</td>
				                <td>${report.id}</td>
				                <td></td>
				            </tr>
				        </c:forEach>
				        </tbody> 
				    </table>
			   </div>
			</div>
		</div>
		
	    <div id="edit-report-panel" class="info-panel col-md-4">
			<button class="info-panel-side-button info-panel-close close">
				<i class="fa fa-chevron-right"></i>
			</button>
			<div class="info-panel-title">修改报表</div>
			<div class="info-panel-content">
				<form id="report-form" action="${base}/report/savereport" method="post" class="form-horizontal" >
					<c:import url="/error/inline.jsp">
						<c:param name="errorPlacerId">report-update</c:param>
					</c:import>
	
					<div class="row">
						<!-- 报表名称 -->
						<div class="col-md-12">
							<div class="form-group">
								<label class="col-md-2 control-label">名称<em>*</em></label>
								<div class="col-md-9">
									<input type="text" name="report.name" class="form-control" placeholder="报表名称不超过64个字符" />
								</div>
							</div>
						</div> 
					</div>
					<div class="row"> 
						<!-- 报表描述 -->
						<div class="col-md-12">
							<div class="form-group">
								<label class="col-md-2 control-label" for="input-description">描述</label>
								<div class="col-md-9">
									<textarea id="input-description" name="report.description" class="form-control" rows="3" placeholder="描述内容不超过256个字符"></textarea>
								</div>
							</div>
						</div>
					</div>
					
					<div class="form-group form-btns">
						<div class="col-md-5 col-md-offset-1">
							<button type="submit" class="btn btn-primary btn-block"><fmt:message key="button.ok" /></button>
						</div>
						<div class="col-md-5">
							<button type="button" class="btn btn-primary btn-clean btn-block info-panel-close"><fmt:message key="button.cancel" /></button>
						</div>
					</div>
					<input type="hidden" name="report.id" id="reportId" /> 
					
				</form>					
			</div>
		</div>
		
		<!-- 查看报表条件输入框 -->
	    <div class="modal fade" id="view-report-modal" tabindex="-1" role="dialog" aria-hidden="true">
	        <form id="view-report-form" action="${base}/report/viewpreReport" method="post" class="form-horizontal">
	        <div class="modal-dialog">
	            <div class="modal-content">
	                <div class="modal-header">
				        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				        <h4 class="modal-title"><fmt:message key="button.preview" /></h4>
					</div>
	                <div class="modal-body">
	                	<span>请先选择时间范围</span>
						<div class="row">
							<div class="col-md-11">
								<div class="form-group">
								    <input type="radio" name="range:type" value="relative" checked="checked" id="radio-type-relative"/>相对时间
							  	</div>
							</div>
						</div>
						<div class="row" id="relative">
							<div class="col-md-10 col-md-offset-1">
								<div class="form-group">
									<div class="input-group">
										<input type="number" name="range:last" class="form-control view-relative" id="range-last" value="1" min="1" max="24" />
										<span class="input-group-btn">
											<select name="range:unit" class="form-control view-relative" id="range-unit" style="min-width: 70px;" data-select2-minimum-results-for-search="-1">
												<option value="hour">小时</option>
												<option value="day">天</option>
												<option value="week">周</option>
												<option value="month">月</option>
											</select>
										</span>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
						  	<div class="col-md-11">
								<div class="form-group">
						    		<input type="radio" name="range:type" value="absolute" id="radio-type-absolute" />绝对时间
						    	</div>
							</div>
						</div>
	                    <div class="row" id="absolute">
		                    <div class="col-md-10 col-md-offset-1">
								<div class="form-group">
									<label class="col-md-3 control-label">开始时间</label>
									<div class="col-md-7">
										<span id="view-start-time"> </span>
										<input type="hidden" name="range:from" id="range-time-from" class="range-time-start"/>
									</div>
								</div>
							</div>
		                    <div class="col-md-10 col-md-offset-1">
								<div class="form-group">
									<label class="col-md-3 control-label">结束时间</label>
									<div class="col-md-7">
										<span id="view-end-time"> </span>
									    <input type="hidden" name="range:to" id="range-time-to" class="range-time-stop"/>
								    </div>
								</div>
							</div>
	                    </div>
	                </div>
	                <div class="modal-footer">
						<input type="hidden" name="range:reportId" id="range-reportId"/>
						<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
	                    <button type="button" class="btn btn-default" data-dismiss="modal"><fmt:message key="button.cancel" /></button>
	                    <button type="submit" class="btn btn-primary" id="view-report-confirm"><fmt:message key="button.preview" /></button>
	                </div>
	            </div>
	        </div>
	        </form>
	    </div>
	    
	    <!-- 报表预览 -->	
		<div id="preview-report-modal" class="modal fade col-md-11" role="dialog" aria-hidden="true">
			<div class="modal-dialog modal-lg">
	    		<div class="modal-content">
	    			<div class="modal-header">
				        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">预览报表</h4>
					</div>
					<div class="modal-body">
						<div class="row">
							<div class="col-md-12">
								<div class="toolbar">
							        <!-- <a title="打印报表" href="javascript:window.print()"><i class="fa fa-print"></i></a>
							        <a title="发送邮件" href="#send-mail-modal" data-toggle="modal"><i class="fa fa-envelope"></i></a>
							        <span class="separator"></span> -->
							        <a title="导出为PDF文件" href="javascript:void(0);" data-type="PDF"><i class="fa fa-file-pdf-o"></i></a>
							        <a title="导出为HTML文件" href="javascript:void(0);" data-type="HTML"><i class="fa fa-html5"></i></a> <!-- <i class="fa fa-internet-explorer"></i> -->
							        <a title="导出为图片文件" href="javascript:void(0);" data-type="IMAGE"><i class="fa fa-file-photo-o"></i></a>
							        <a title="导出为WORD文件" href="javascript:void(0);" data-type="DOC"><i class="fa fa-file-word-o"></i></a>
							        <a title="导出为EXCEL文件" href="javascript:void(0);" data-type="XLS"><i class="fa fa-file-excel-o"></i></a>
							        <a title="导出为RTF文件" href="javascript:void(0);" data-type="RTF"><i class="fa fa-file"></i></a>
							        <!-- <a title="导出为XLS文件" href="javascript:void(0);"><i class="fa fa-file-excel-o"></i></a> -->
							        <a title="导出为CSV文件" href="javascript:void(0);" data-type="CSV"><i class="fa fa-file-text"></i></a>
							    </div>
						    </div>
						</div>
						<div class="row">
							<div class="col-md-12" id="img-content">
								<!-- <img id="report-preview" style="width: 100%; height: 65%"/> style="height: 500px;" -->
								<iframe id="report-preview" style="width: 100%; height: 100%"></iframe>
							</div>
						</div> 
					</div>
					<!-- <div class="modal-footer">		
					
					</div> -->
				</div>
			</div>
		</div>
	    
	    <!-- 发送报表邮件 -->
	    <div class="modal fade" id="send-mail-modal" tabindex="-1" role="dialog" aria-hidden="true">
		    <form name="SendMailForm" action="${base}/report/saveMailReport" method="POST" >
		      	<div class="modal-dialog">
		    		<div class="modal-content">
		    			<!-- <div class="modal-header">
					        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					        <h4 class="modal-title"><fmt:message key="button.preview" /></h4>
						</div> -->
		                <div class="modal-body">  
		      				<!-- 收件人 -->
							<div class="col-md-12">
								<div class="form-group">
									<label class="col-md-2 control-label">收件人<em>*</em></label>
									<div class="col-md-6">
										<input type="text" name="mail:to" class="form-control" />
									</div>
									<div class="col-md-4">
							          	<p class="form-control-static">(使用英文";"分隔)</p>
							        </div>
							    </div>
							</div>
		      				<!-- 抄送 -->
							<div class="col-md-12">
								<div class="form-group">
									<label class="col-md-2 control-label">抄送<em>*</em></label>
									<div class="col-md-6">
										<input type="text" name="mail:cc" class="form-control" />
									</div>
									<div class="col-md-4">
							          	<p class="form-control-static">(使用英文";"分隔)</p>
							        </div>
							    </div>
							</div>
		      				<!-- 密送 -->
							<div class="col-md-12">
								<div class="form-group">
									<label class="col-md-2 control-label">密送<em>*</em></label>
									<div class="col-md-6">
										<input type="text" name="mail:bcc" class="form-control" />
									</div>
									<div class="col-md-4">
							          	<p class="form-control-static">(使用英文";"分隔)</p>
							        </div>
							    </div>
							</div>
		      				<!-- 邮件主题 -->
							<div class="col-md-12">
								<div class="form-group">
									<label class="col-md-2 control-label">邮件主题<em>*</em></label>
									<div class="col-md-6">
										<input type="text" name="mail:subject" class="form-control" />
									</div>
									<div class="col-md-4">
							          	<p class="form-control-static"></p>
							        </div>
							    </div>
							</div>
		      				<!-- 邮件正文 -->
							<div class="col-md-12">
								<div class="form-group">
									<label class="col-md-2 control-label">邮件正文</label>
									<div class="col-md-6">
										<textarea name="mail:content" rows="5" class="form-control" ></textarea>
									</div>
									<div class="col-md-4">
							          	<p class="form-control-static"></p>
							        </div>
							    </div>
							</div>
		      			</div>
		                <div class="modal-footer">
					        <button type="button" class="btn btn-default" data-dismiss="modal"><fmt:message key="button.cancel" /></button>
		                    <button type="button" class="btn btn-primary" id="send-report-confirm"><fmt:message key="button.ok" /></button>
		      			</div>
	     			</div>      
		      	</div>
		    </form>
	    </div>
		    
	    <!-- 下载报表 -->
	    <form  id="export-report-form" method="post" action="${base}/report/exportreport" method="POST" target="_blank">
			<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
	    </form>
	    
		<!-- 删除确认框 -->			
	    <div class="modal fade" id="del-report-confirm-modal" tabindex="-1" role="dialog" aria-hidden="true">
	        <div class="modal-dialog modal-sm">
	            <div class="modal-content">
	                <div class="modal-body">
	                    <fmt:message key="dialog.confirm.content" /><!-- 确定要删除以下报表吗： -->
	                    <ul class="names"></ul>
	                </div>
	                <div class="modal-footer">
	                    <button type="button" class="btn btn-default" data-dismiss="modal"><fmt:message key="button.cancel" /></button>
	                    <button type="button" id="btn-del-confirm" class="btn btn-danger"><fmt:message key="button.delete" /></button>
	                </div>
	            </div>
	        </div>
	    </div>
	
		<!-- 添加/修改报表调度 -->	
		<div id="edit-scheduling-panel" class="info-panel col-md-8">
			<button class="info-panel-side-button info-panel-close close">
				<i class="fa fa-chevron-right"></i>
			</button>
			<div class="info-panel-title"><fmt:message key="button.add" />调度</div>
			<div class="info-panel-content" data-spy="scroll" data-target="#navbar-report-info">
				<!-- 报表调度信息  -->
				<div class="row">
					<div class="col-md-12">
					  <form id="report-cheduling-form" action="${base}/report/savescheduling" method="post" class="form-horizontal" data-validate-type="client" >
						<c:import url="/error/inline.jsp">
							<c:param name="errorPlacerId">report-scheduling</c:param>
						</c:import>
					  <div class="col-md-12">
						<div class="row">
							<!-- 报表调度策略 -->
							<div class="col-md-12">
								<div class="form-group">
									<label class="col-md-2 control-label">策略<em>*</em></label>
									<div class="col-md-6">
										<label class="radio-inline">
									        <input name="schedule.scheduleType" class="scheduleType" value="ONCE" checked="checked" type="radio">
								          	执行一次
								        </label>
									    <label class="radio-inline">
									        <input name="schedule.scheduleType" class="scheduleType" value="DAYLY" type="radio">
									        每日
									    </label>
									    <label class="radio-inline">
								            <input name="schedule.scheduleType" class="scheduleType" value="WEEKLY" type="radio">
								          	每周
								        </label>
									    <label class="radio-inline">
								            <input name="schedule.scheduleType" class="scheduleType" value="MONTHLY" type="radio">
								          	每月
								        </label>
									</div>
									<div class="col-md-4">
							          <p class="form-control-static">(请同时选择运行一次时的数据时间范围)</p>
							        </div>
								</div>
							</div> 
						</div>
						<div class="row" id="schedule-range" style="display: none;">
							<!-- 生成报表时间范围 -->
							<div class="col-md-12">
								<div class="form-group">
									<label class="col-md-2 control-label">时间范围</label>
									<div class="col-md-6">
									    <div class="row">
									    	<div class="col-md-12">
												<div class="form-group">
													<label class="col-md-3 control-label">
												        <label class="radio-inline" style="padding-top: 0px;"><input name="range.type" class="type" value="relative" checked="checked" type="radio">相对时间</label>
											        </label>
													<div class="col-md-8 input-group">
														<input type="number" name="range.last" class="form-control range-relative" value="1" data-form-default-value="1" min="1" max="24" />
														<span class="input-group-btn">
															<select name="range.lastUnit" class="form-control range-relative" style="min-width: 70px;" data-select2-minimum-results-for-search="-1">
																<option value="MINUTE">分钟</option>
																<option value="HOUR">小时</option>
																<option value="DAY">天</option>
															</select>
														</span>
								        			</div>
								        		</div>
								        	</div>
								        </div>
								        
									    <div class="row">
								            <div class="col-md-12">
								            	<div class="form-group" style="margin-bottom: 0px;">
								            		<label class="col-md-3 control-label">
												        <label class="radio-inline" style="padding-top: 0px;"><input name="range.type" class="type" value="absolute" type="radio" id="schedule-range-type-absolute" /> 绝对时间</label>
												    </label>
												    <div class="col-md-4" style="padding-left: 0;">
												    	<span id="schedule-start-time"> </span>
													    <input type="hidden" name="range.start" class="schedule-time-start schedule-time"/>
												    </div>
												    <div class="col-md-4" style="padding-right: 0;">
												    	<span id="schedule-stop-time"> </span>
													    <input type="hidden" name="range.stop" class="schedule-time-stop schedule-time"/>
												    </div>
								            	</div>
								            </div>
								        </div>
									</div>
									<div class="col-md-4">
							          <!-- <p class="form-control-static">(请同时选择运行一次时的数据时间范围)</p> -->
							        </div>
								</div>
							</div> 
						</div>
						<div class="row">
							<!-- 生成报表类型 -->
							<div class="col-md-12">
								<div class="form-group">
									<label class="col-md-2 control-label">文件格式<em>*</em></label>
									<div class="col-md-6">
										<label class="radio-inline">
									        <input name="schedule.resultType" value="HTML" checked="checked" type="radio">
								          	HTML 
								        </label>
									    <label class="radio-inline">
									        <input name="schedule.resultType" value="PDF" type="radio">
									        PDF
									    </label>
									    <label class="radio-inline">
								            <input name="schedule.resultType" value="DOC" type="radio">
								          	Word
								        </label>
									    <label class="radio-inline">
								            <input name="schedule.resultType" value="XLS" type="radio">
								          	Excel
								        </label>
									    <label class="radio-inline">
								            <input name="schedule.resultType" value="IMAGE" type="radio">
								          	PNG
								        </label>
									</div>
									<div class="col-md-4">
							          <p class="form-control-static">(生成的Word与Excel格式文件均为Office 2003格式)</p>
							        </div>
								</div>
							</div> 
						</div>
						<div class="row">
							<!-- 报表调度开始时间schedule. -->
							<div class="col-md-12">
								<div class="form-group">
									<label class="col-md-2 control-label">开始时间</label>
									<div class="col-md-6">
										<label id="report_start_time" style="width: 180px;">开始时间</label>
										<input type="hidden" name="startTime" class="form-control" placeholder="请选择调度首次运行时间" id="schedule_start_time"/>
									</div>
									<div class="col-md-4">
							          <p class="form-control-static">(不设置或设置的时间早于当前时间，则调度任务将立刻执行)</p>
							        </div>
								</div>
							</div> 
						</div>
						<div class="row">
							<!-- 报表邮件接收人 -->
							<div class="col-md-12">
								<div class="form-group">
									<label class="col-md-2 control-label" for="input-description">接收人</label>
									<div class="col-md-6">
										<textarea id="input-description" name="schedule.recipients" class="form-control" rows="3" placeholder="报表邮件接收人"></textarea>
									</div>
									<div class="col-md-4">
							          <p class="form-control-static">(如果不输入接收邮箱，则调度运行后将不自动通知,多个接收人使用英文";"分隔)</p>
							        </div>
								</div>
							</div>
						</div>
						<div class="row"> 
							<!-- 报表邮件是否发送附件 -->
							<div class="col-md-12">
								<div class="form-group">
									<label class="col-md-2 control-label">发送附件</label>
									<div class="col-md-6">
										<input type="checkbox" name="schedule.sendAttachement" class="form-control" value="true" checked="checked" placeholder="邮件发送报表附件" />
									</div>
									<div class="col-md-4">
							          <p class="form-control-static"></p>
							        </div>
								</div>
							</div> 
						</div>
						<div class="row"> 
							<!-- 报表邮件主题 -->
							<div class="col-md-12">
								<div class="form-group">
									<label class="col-md-2 control-label">邮件主题</label>
									<div class="col-md-6">
										<input type="text" name="schedule.mailSubject" class="form-control" placeholder="报表邮件主题" />
									</div>
									<div class="col-md-4">
							          <p class="form-control-static"></p>
							        </div>
								</div>
							</div> 
						</div>
						<div class="row"> 
							<!-- 报表邮件正文 -->
							<div class="col-md-12">
								<div class="form-group">
									<label class="col-md-2 control-label">邮件正文</label>
									<div class="col-md-6">
										<!-- <input type="text" name="schedule.mailContent" class="form-control" placeholder="报表邮件正文" /> -->
										<textarea name="schedule.mailContent" rows="5" class="form-control" placeholder="报表邮件正文" ></textarea>
									</div>
									<div class="col-md-4">
							          <p class="form-control-static"></p>
							        </div>
								</div>
							</div> 
						</div>
						
						<div class="form-group form-btns">
							<div class="col-md-5 col-md-offset-1">
								<button type="submit" class="btn btn-primary btn-block"><fmt:message key="button.ok" /></button>
							</div>
							<div class="col-md-5">
								<button type="button" class="btn btn-primary btn-clean btn-block info-panel-close"><fmt:message key="button.cancel" /></button>
							</div>
						</div>
						<input type="hidden" name="schedule.reportId" id="report_Id" />
					</div>
					</form>	
					</div>
				</div>
			</div>
		</div>
		
		<!-- 删除确认框 -->			
	    <div class="modal fade" id="del-scheduling-confirm-modal" tabindex="-1" role="dialog" aria-hidden="true">
	        <div class="modal-dialog modal-sm">
	            <div class="modal-content">
	                <div class="modal-body">
	                	<!-- 确定要删除选中报表调度吗： -->
	                	<fmt:message key="dialog.confirm.content" />
	                </div>
	                <div class="modal-footer">
	                    <button type="button" class="btn btn-default" data-dismiss="modal"><fmt:message key="button.cancel" /></button>
	                    <button type="button" id="btn-del-scheduling-confirm" class="btn btn-danger"><fmt:message key="button.delete" /></button>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>
</div>
<div id="script-container">
	<script type="text/javascript" src="${base}/js/plugins/validate/jquery.validate.js"></script>
	<script type="text/javascript" src="${base}/js/plugins/validate/jquery.validate.ext.methods.js"></script>
	<script type="text/javascript" src="${base}/js/plugins/form/jquery.form.min.js"></script>
	
    <script type="text/javascript">
    	var xhrFields, reportmessage = {
    		reportSaveXhrFields: {
                errorCodes: '报表保存失败',
                successCodes: '报表保存成功',
                codesDuration: 2
            },
            reportUpdateXhrFields: {
                errorCodes: '报表更新失败',
                successCodes: '报表更新成功',
                codesDuration: 2
            },
            reportDeleteXhrFields: {
                errorCodes: '报表删除失败',
                successCodes: '报表删除成功',
                codesDuration: 2
            },
            schedulingSaveXhrFields: {
                errorCodes: '报表调度保存失败',
                successCodes: '报表调度保存成功',
                codesDuration: 2
            },
            schedulingUpdateXhrFields: {
                errorCodes: '报表调度更新失败',
                successCodes: '报表调度更新成功',
                codesDuration: 2
            },
            schedulingDeleteXhrFields: {
                errorCodes: '报表调度删除失败',
                successCodes: '报表调度删除成功',
                codesDuration: 2
            }
    	}; 
    	
    	/* ant组件加载 */ 
		var popconfirm = React.createFactory(antd.Popconfirm);
		var datepicker = React.createFactory(antd.DatePicker);
		var rangepicker = React.createFactory(antd.DatePicker.RangePicker);
		
		/* 报表处理器 */
		var ReportHandler = {
			deletepopconfirm : function(data) { // 删除报表确认提示
				return popconfirm({	title:'确定删除[' + data.name + ']报表吗？', 
						placement:'topRight', 
						onConfirm:function(e) {
							ReportHandler.deletereportHandler(data.id);
			    		}
					}, 
					React.createElement('button', {className:'btn btn-xs btn-danger'}, React.createElement('i', {className:'fa fa-trash-o'}))
		    	);
			},
			deletereportHandler : function(ids) { // 删除报表
	            $.ajax({
	                url: "${base}/report/deletereport",
	                data: {ids: ids},
	                type: "POST",
	                dataType: "json",
	                xhrFields: reportmessage.reportDeleteXhrFields,
	                success: function() {
	                    table.ajax.reload(null, false);
	                }
	            });
	        }
		};
		
		// 预览时间选择参数
		var viewOption = {
	       	showTime: true,
	       	format: "yyyy-MM-dd HH:mm:ss",
	       	containerId: "view-report-form",
	       	startTime: 0,
	       	endTime: new Date().getTime() + 86400000,
	       	selectedTime: ".range-time-start",
	       	style: { width: "100%" },
	       	disabled: true,
	       	onChange: function(value, selectedTime) {
	       		var time = new Date(value).getTime();
	       		$(selectedTime).val(from);
	       	},
	       	disabledDate:  function(value, startTime, endTime) {
	       		if(value['time'] <= startTime || value['time'] >= endTime){
    		    	return true;
    		    }else{
    		    	return false; 
    		    }
	       	},
    		getCalendarContainer: function(){
    			return document.getElementById(viewOption.containerId);
    		}
		};
		
		//查看报表时间范围
		var viewstartOption = $.extend({}, viewOption, {selectedTime: ".range-time-start", onChange: function(value) {
			var from = new Date(value).getTime();
			$(viewstartOption.selectedTime).val(from);
			
			viewendOption.startTime = from;
			ReactDOM.render(datepicker(viewendOption), document.getElementById('view-end-time'));
			$('#view-end-time input').prop('name', 'range:end');
		},
       	disabledDate:  function(value){
       		return viewOption.disabledDate(value, viewstartOption.startTime, viewstartOption.endTime);
       	}});
		ReactDOM.render(datepicker(viewstartOption), document.getElementById('view-start-time'));
    	
    	var viewendOption = $.extend({}, viewOption, {selectedTime: ".range-time-stop", onChange: function(value) {
			var to = new Date(value).getTime();
			$(viewendOption.selectedTime).val(to);
			
			viewstartOption.endTime = to;
			ReactDOM.render(datepicker(viewstartOption), document.getElementById('view-start-time'));
			$('#view-start-time input').prop('name', 'range:start');
		},
       	disabledDate:  function(value){
       		return viewOption.disabledDate(value, viewendOption.startTime, viewendOption.endTime);
       	}});
    	ReactDOM.render(datepicker(viewendOption), document.getElementById('view-end-time'));

        // 加载表格数据
        var tablesearch = {}, selectedIds = []/* 记录选中报表ID */; 
		var table = $("#reportTable").DataTable({
           columnDefs: [{
               "className": 'select-checkbox',
               "targets": 0
           }, {
               orderable: false, targets: [0, 1, 3, 4, 5, 6]
           }],
           columns: [
               {width: "15px", defaultContent: ""},
               {data: "name", render: function(data, type, full, meta) {
            		return '<a class="btn-edit-report">'+data+'</a>';   
               }},
               {data: "created", render: function(data, type, full, meta) {
            		return (new Date(parseInt(data))).format("yyyy-MM-dd hh:mm:ss");   
               }}, 
			   {data: "modified" , render: function(data, type, full, meta) {
					if(data != null && data>0){
						return (new Date(parseInt(data))).format("yyyy-MM-dd hh:mm:ss");	
					}
	        		return "";   
	           }},
               /* {data: "creator"},*/ 
               {data: "description" },
               {data: "id", defaultContent: "", render: function(data, type, full, meta) {
	           		var html = '<a href="#view-report-modal" data-toggle="modal" data-id="'+data+'" class="btn-view-report compact l-btn" title="预览">'+
	           			'<span class="glyphicon glyphicon-file"></span>'+
	           		'</a>';
           
               return html;
           	   }},
               {data: "id", defaultContent: "", render: function(data, type, full, meta) {
	           		var html = '<a href="javascript:void(0);" data-id="'+data+'" class="btn-schedule-report compact l-btn" title="调度">'+
	           			'<span class="glyphicon glyphicon-time"></span>'+
	           		'</a>';
               
                   return html;
               }},
               {data: null, orderable: false, defaultContent:"", width:"60px", className:'center' }
           ],
		   createdRow: function(row, data, dataIndex) {
			   ReactDOM.render(React.createElement('div', {className: 'btn-group'},
					React.createElement('a', {className:'btn btn-xs btn-default', target: '_blank', href: '${base}/report/viewreportcondition?reportId='+data.id}, React.createElement('i', {className:'fa fa-search'})),
					ReportHandler.deletepopconfirm(data)), $(row).find("td:last-child")[0]);
		   },
		   order: [],
           processing: true,
           serverSide: true,
           ajax: {
               url: '${base}/report/listreport',
               data: function ( d ) {
                   //d.fuzzy = $('#fuzzy').val();
               },
               traditional: false
           },
           deferLoading: '${pager.records}',
           select: {
               style: 'multi',
               selector: 'td:first-child:not(.preset)'
           }
        }).on('select', function(e, dt, type, indexes) {
            e.stopPropagation();
            if (type === 'row') {
                selectedIds = selectedIds.concat(table.rows(indexes).data().pluck('id').toArray());
                if (selectedIds.length > 0)
                    $("#btn-del-report").prop("disabled", false);
            }
        }).on('deselect', function(e, dt, type, indexes) {
            if (type === 'row') {
                var deselectedIds = table.rows(indexes).data().pluck('id').toArray();
                while (deselectedIds.length > 0) {
                    var id = deselectedIds.pop();
                    var idx = selectedIds.indexOf(id);
                    if (idx > -1)
                        selectedIds.splice(idx, 1);
                }
                if (selectedIds.length == 0)
                    $("#btn-del-report").prop("disabled", true);
            }
        });

		// 绑定报表事件
		$(document).on("keyup", '#fuzzy', function(event){//根据名称搜索报表
			if (event.keyCode == "13") {
				table.ajax.reload();
			}
		}).on("change", "#check-all", function() {//全选和全不选
            selectedIds = [];
			this.checked ? table.rows().select() : table.rows().deselect();
        }).on("show.modal.bs", "#del-report-confirm-modal", function() { // 删除报表提示模态框
            var names = table.rows().data().filter(function(data, index) {
               return selectedIds.indexOf(data.id) > -1 ? true : false;
            }).toArray();
            var ul = $(this).find('ul.names').empty();
            for (var i = 0; i < names.length; i++)
                ul.append($('<li />', {text: names[i].name}));
        }).on("click", "#btn-del-confirm", function() { // 确认删除报表
        	ReportHandler.deletereportHandler(selectedIds);
            $("#del-report-confirm-modal").modal("hide");
        }).on("click", "#reportTable tbody .btn-edit-report", function(e) { // 修改报表
            var report = table.rows($(this).parent()).data()[0];
            $("#edit-report-panel").data("report", report);
            $(".info-panel").infopanel("hide");
            $("#edit-report-panel").infopanel("show");
            e.stopPropagation();
        }).on("click", "#reportTable tbody .btn-view-report", function(e) { // 预览报表
        	var report = table.rows($(this).parent()).data()[0];
        	var reportId = $(this).data("id");
        	$("#range-reportId").val(reportId);

        	viewstartOption.startTime = viewendOption.startTime = parseInt(report.created);
        }).on("change", "#view-report-modal input[type=radio]", function(e){ // 选择预览报表相对或绝对时间
    		var type = $(this).val();
    		var disabled = false;
    		if(type == "relative"){
    			disabled = true;
	    		$("#view-report-form").validate().resetForm();
				$('#view-start-time').empty();
				$('#view-end-time').empty();
    		}
    		viewstartOption.disabled = viewendOption.disabled = disabled;
			$("#relative input, #relative select").each(function () {
				$(this).prop('disabled', !disabled);
			});
			$("#absolute input, #absolute select").each(function () {
				$(this).prop('disabled', disabled);
			});
    		
    		ReactDOM.render(datepicker(viewstartOption), document.getElementById('view-start-time'));
			$('#view-start-time input').prop('name', 'range:start');
        	ReactDOM.render(datepicker(viewendOption), document.getElementById('view-end-time'));
			$('#view-end-time input').prop('name', 'range:end');
    	}).on("change", "#range-unit", function(e){ // 设置相对时间范围
    		var unit = $(this).val();
    		//相对时间长度与时间单位不相符，应遵循的规则为：小时不大于24，天不大于7

    		if(unit == "hour"){
    			$("#range-last").attr("max", 24);
    		}else if(unit == "day"){
    			$("#range-last").attr("max", 7);
    		}else if(unit == "week"){
    			$("#range-last").attr("max", 52);
    		}else if(unit == "month"){
    			$("#range-last").attr("max", 12);
    		}
    	}).on("click", ".toolbar a", function(e){// 导出报表
    		$("#export-report-form input:gt(0)").remove();// 清空导出条件
    		
    		var type = $(this).data("type");
    		$("#export-report-form").append($('<input>', {'type':'hidden', 'name': 'type', 'value': type}));
    		//var data = {type: type};
    		var mapdata = $("#export-report-form").data("mapdata");
    		
    		for(var mapkey in mapdata){  
    			var mapvalue = mapdata[mapkey];
    			if(typeof mapvalue === "object"){
	    			for(var key in mapvalue){
	    				//data[mapkey+"."+key] = mapvalue[key];
	    				if(typeof mapvalue[key] != "object")
	    					$("#export-report-form").append($('<input>', {'type':'hidden', 'name': mapkey+"."+key, 'value': mapvalue[key]}));
	    			}  
    			}else if(mapvalue != ""){
    				$("#export-report-form").append($('<input>', {'type':'hidden', 'name': mapkey, 'value': mapvalue}));
    			}
   	      	}  
    		
    		$("#export-report-form").submit();
    	}).on("hide.modal.bs", "#view-report-modal", function() { // 预览结束恢复时间选择
    		$("#export-report-form").removeData("mapdata");// 删除预览条件
 			$("#view-report-form").validate().resetForm();
 			$('#view-report-form').find(':input:radio:first').click();
 			$('#view-report-form').find('select').change();
			$("#view-report-modal .modal-title").text('<fmt:message key="button.preview" />');
        }).on("click", ".btn-schedule-report", function(e) { // 查看报表调度详情
            e.stopPropagation();
        	var reportId = table.rows($(this).parent()).data()[0].id;
        	var tr = $(this).closest('tr');
    		var row = table.row( tr );
    		$.each(table.rows().nodes(), function(index, node) {
				var that = table.row(node);  
                if(that.data().id != reportId)
					that.child.hide();
            });
    		
			if ( row.child.isShown() ) {
				row.child.hide();
			}else{
				var frame = $(tr).data('frame');
				if (!frame) {
					var frame = $("<iframe />", {
			  			id: "schedule-frame-"+reportId,
			  			name: "schedule-frame-"+reportId,
			  			style: 'width: 100%; min-height: 360px', //以分辨率1024*768为准
			  			frameborder: "0",
			  			src: "${base}/report/scheduling/"+reportId
			  		});
					row.child(frame);
					$(tr).data('frame', frame);
				}
				row.child.show();
			}
        }).on('showing.infopanel', "#edit-report-panel", function() {// 创建或修改报表
    		var ele = $(this);
            var report = ele.data("report");
          	
            if (report){//修改报表
                ele.removeData('report');
                xhrFields = reportmessage.reportUpdateXhrFields;
            
            	var data = {report: report};
                //加载表单输入框值
            	$("#report-form input, textarea").each(function () {
                    var input = $(this);
                    var name = input.prop('name').substring(7);
                    if(report[name])
                		input.val(report[name]);
                });
            }else{//添加报表处理
                xhrFields = reportmessage.reportSaveXhrFields;
                $(this).find('.info-panel-title').text('添加报表');
            }
    	});

    	// 预览报表
		var imgheight = $(window).height()-170;
		$("#img-content").css({height: imgheight+'px'});
    	// $("#img-content").mCustomScrollbar();
    	$("#view-report-form").submit(function(e) {
    		if($(this).valid()) {
    			$("#view-report-modal .modal-title").text("正在生成报表，请稍候...");
    			$(this).ajaxSubmit({
     			   type: 'POST',
     			   dataType: 'json',
     			   resetForm: true,
     			   errorPlacer: 'update',
     			   success: function(response, status, xhr, form) {
     				    $("#report-preview").prop("src", "${base}/temp/"+response.reportPng+'/index.html');
     					$("#view-report-modal").modal("hide");
     				  	$("#export-report-form").data("mapdata", response);
     	    			$("#preview-report-modal").modal("show");
     	    			/* $("#img-content").bind("mouseover", function(){
     	    				$("#img-content").mCustomScrollbar("update");
     	    				$("#img-content").unbind("mouseover");
     	    			}); */
     			   }
     			});
    		}
            return false;
    	});

    	//添加报表
    	$('#report-form').submit(function(e) {
    		if($(this).valid()) {
    			var data = {jsonCache: '{"id":100,"name":"统计条件","description":"这是统计条件","timeRangeConfigJson":"{\"startTime\":1,\"endTime\":1,\"unit\":\"d\",\"count\":1,\"refreshUnit\":\"m\",\"refreshCount\":1}","searchConfigJson":"{\"startTime\":1,\"endTime\":1,\"filter\":{},\"model\":\"event\"}","statisticConfigJson":"{\"chartType\":\"TRENDAREA\",\"extra\":{},\"funcs\":[{\"field\":\"lreceipttime\",\"func\":\"count\",\"name\":\"count_lreceipttime\"}],\"groups\":[{\"field\":\"lreceipttime\",\"aggType\":\"dateHistogram\",\"internal\":\"5m\",\"size\":10,\"name\":\"lreceipttime\"}],\"orders\":[]}","type":1,"created":0,"modified":0,"groupId":1,"createdBy":0,"modifyBy":0}'};
    			$(this).ajaxSubmit({
    			   type: 'POST',
    			   dataType: 'json',
    			   resetForm: true,
    			   errorPlacer: 'update',
    			   xhrFields: xhrFields,
    			   data: data, 
    			   success: function(response, status, xhr, form) {
    				   table.ajax.reload();
    				   $("#edit-report-panel").infopanel("hide");
    			   }
    			});
    		}
            return false;
        });
    	
		// 调度时间选择器参数
		var scheduleOption = {
       		showTime: true,
			format: "yyyy-MM-dd HH:mm:ss",
			placeholder: "请选择时间", 
       		containerId: 'edit-scheduling-panel',
       		startTime: 0,
       		endTime: new Date().getTime() + 86400000,
	       	selectedTime: "#schedule_start_time",
       		style: { width: "100%" },
       		disabled: false,
    		onChange: function(value) {
    			var time = new Date(value).getTime();
    			$(scheduleOption.selectedTime).val(time);
    		},
    		disabledRang:  function(value, startTime, endTime) {
    		    /*只能选中报表开始时间和结束时间范围内的日期*/ 
    		    if(value['time'] <= startTime || value['time'] >= endTime){
    		    	return true;
    		    }else{
    		    	return false; 
    		    }
    		},
    		getCalendarContainer: function(){
    			return document.getElementById(scheduleOption.containerId);
    		} 
       	};
		// 调度查询开始时间
		var schedulestartOption = $.extend({}, scheduleOption, {selectedTime: ".schedule-time-start", onChange: function(value) {
			var time = new Date(value).getTime();
			$(schedulestartOption.selectedTime).val(time);
			
			schedulestopOption.startTime = time;
			ReactDOM.render(datepicker(schedulestopOption), document.getElementById('schedule-stop-time'));
			$('#schedule-stop-time input').prop('name', 'range:stop');
		},
       	disabledDate:  function(value){
       		return scheduleOption.disabledRang(value, schedulestartOption.startTime, schedulestartOption.endTime);
       	}});
		// 调度查询结束时间
		var schedulestopOption = $.extend({}, scheduleOption, {selectedTime: ".schedule-time-stop", onChange: function(value) {
			var time = new Date(value).getTime();
			$(schedulestopOption.selectedTime).val(time);
			
			schedulestartOption.endTime = time;
			ReactDOM.render(datepicker(schedulestartOption), document.getElementById('schedule-start-time'));
			$('#schedule-start-time input').prop('name', 'range:start');
		},
       	disabledDate:  function(value){
       		return scheduleOption.disabledRang(value, schedulestopOption.startTime, schedulestopOption.endTime);
       	}});
		
		// 绑定报表事件
    	$(document).on("click", "#edit-scheduling-panel .scheduleType", function(e){
    		ReportScheduleHandler.scheduleType();
    	}).on("click", "#edit-scheduling-panel .type", function(e){
    		ReportScheduleHandler.scheduleRange();
    	}).on("showing.infopanel", "#edit-scheduling-panel", function(){// 初始化报表调度面板时间选择控件
    		var report = $(this).data("report"); // 调度一次的时间范围不能打于当前时间，不能小于报表创建时间
    		schedulestartOption.startTime = schedulestopOption.startTime = parseInt(report.created);
            ReportScheduleHandler.scheduleType();
			// 设置默认开始时间为当前时间
			var defaultDate = new Date();
			scheduleOption['defaultValue'] = defaultDate;
			$(scheduleOption.selectedTime).val(defaultDate.getTime());
    		ReactDOM.render(datepicker(scheduleOption), document.getElementById('report_start_time'));
    	}).on("click", "#btn-del-scheduling-confirm", function() { // 删除报表调度
    		var reportId = $("#del-scheduling-confirm-modal").data("reportId");
    		var ids = $("#del-scheduling-confirm-modal").data("ids");
    		$.ajax({
                url: "${base}/report/deletescheduling",
                data: {reportId: reportId, ids: ids},
                type: "POST",
                dataType: "json",
                xhrFields: reportmessage.schedulingDeleteXhrFields,
                success: function() {
                	$("#del-scheduling-confirm-modal").removeData("reportId")
                	$("#del-scheduling-confirm-modal").removeData('ids');
                	ReportScheduleHandler.refreshSchedule(reportId);
                }
            });
            $("#del-scheduling-confirm-modal").modal("hide");
        });
    	
    	/* 报表处理器 */
		var ReportScheduleHandler = {
	    	addSchedule: function(reportId){// 添加报表调度
	    		 $.each(table.data(), function(index, report) {  
	    			 if(report.id == reportId){
	    	    		 $("#edit-scheduling-panel").data("report", report);
	    				 return false; 
	    			 }
	    		 });
	             xhrFields = reportmessage.schedulingSaveXhrFields;
	    		 
	    		 $("#report_Id").val(reportId);
	    		 $("#edit-scheduling-panel").infopanel("show");
	    	},
			scheduleType: function(){ // 判断是否指定调度时间
	    		var scheduleType = $("#edit-scheduling-panel .scheduleType:checked").val();
	    		if(scheduleType == "ONCE"){
		    		$("#schedule-range").slideDown();
		    		ReportScheduleHandler.scheduleRange();
	    		}else{
	    			$("#schedule-range").slideUp();
	    		}
	    	},
	    	scheduleRange: function (){ // 刷新时间控件
	    		var type = $("#edit-scheduling-panel .type:checked").val();
	    		var disabled = false;
	    		if(type == "relative"){
	    			disabled = true;
	    		}
				$('.range-relative').prop('disabled', !disabled);
				schedulestartOption.disabled = schedulestopOption.disabled = disabled;
				$('#schedule-start-time').empty();
				$('#schedule-stop-time').empty();
	    		ReactDOM.render(datepicker(schedulestartOption), document.getElementById('schedule-start-time'));
	    		ReactDOM.render(datepicker(schedulestopOption), document.getElementById('schedule-stop-time'));
                $(".schedule-time").each(function(index, input) {
                    var name = $(input).attr("name");
                    $(input).prev().find('input').attr("name", "schedule."+name);
                });
	    	},
	    	delSchedule: function (reportId, ids){ // 删除报表调度
	    		$("#del-scheduling-confirm-modal").data("reportId", reportId);
	    		$("#del-scheduling-confirm-modal").data("ids", ids);
	    		$("#del-scheduling-confirm-modal").modal("show");
	    	},
	    	refreshSchedule: function (reportId){ // 刷新报表调度
				window.frames["schedule-frame-"+reportId].refresh()
	    	}
    	};

		/* 校验相对时间是否选中 */
		$("#report-cheduling-form").validate({
			rules: {
				"schedule.range.start": {required: "#schedule-range-type-absolute:checked"},
				"schedule.range.stop": {required: "#schedule-range-type-absolute:checked"}
			},
			messages: {
				"schedule.range.start": "请选择开始时间",
				"schedule.range.stop": "请选择结束时间"
			}
		});

    	//添加报表调度
    	$('#report-cheduling-form').submit(function(e) {
    		if($(this).valid()) {
    			var reportId = $("#report_Id").val();
    			$(this).ajaxSubmit({
    			   type: 'POST',
    			   dataType: 'json',
    			   resetForm: true,
    			   errorPlacer: 'update',
    			   xhrFields: xhrFields,
    			   //data: data, 
    			   success: function(response, status, xhr, form) {
    				   $("#edit-scheduling-panel").infopanel("hide");
    				   ReportScheduleHandler.refreshSchedule(reportId);
    			   }
    			});
    		}
            return false;
    	});
    	
    </script>
</div>
</body>
</html>